{% extends "base/base.html" %}

{% block content %}
    <div class="col-md-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>任务信息</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Settings 1</a>
                            </li>
                            <li><a href="#">Settings 2</a>
                            </li>
                        </ul>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <br />
                <div class="row">

                    <div class="form-horizontal form-label-left col-md-3">

                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">任务名称:</label>
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">{{ object.task.name }}</label>
                        </div>
                    </div>
                    <div class="form-horizontal form-label-left col-md-3">

                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">成功主机:  </label>
                            <label class="control-label col-sm-4">{{ success_count }}台</label>
                        </div>
                    </div>
                    <div class="form-horizontal form-label-left col-md-3">


                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">失败主机:</label>
                            <label class="control-label col-sm-4">{{ failure_count }}台</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-horizontal form-label-left col-md-4">
                        <br />
                        <div >
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">任务描述:</label>
                            <label class="control-label col-md-8 col-sm-8 col-xs-12 ">{{ object.desc }}</label>
                        </div>
                    </div>
                </div>

        </div>
    </div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>任务执行记录</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Settings 1</a>
                            </li>
                            <li><a href="#">Settings 2</a>
                            </li>
                        </ul>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <p class="text-muted font-13 m-b-30">
                </p>
                <div class="col-md-4">


                <table id="task" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="50%">
                    <thead>
                    <tr>
                        <th>主机IP</th>
                        <th>执行状态</th>
                        <th>查看结果</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for host in host_tasks %}
                    <tr>
                        <th>{{ host.host }}</th>
                        <th>{{ host.status }}</th>
                        <th><a class="btn btn-success status" data="{{ host.output_format }}" status="{{ host.status }}">查看结果</a></th>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>

                  <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                      <div class="modal-content">

                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                          </button>
                          <h4 class="modal-title" id="myModalLabel">主机任务结果显示</h4>
                        </div>
                        <div class="modal-body">
                          <h4 id="status">任务状态</h4>
                          <p>
                              <pre id="output">

                        </pre>
                            </p>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>

                      </div>
                    </div>
                  </div>
                    </div>
                <div class="col-md-8">
                <pre >
                    {{ object.output }}
                </pre>
                </div>

            </div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script>
    $(".status").click(function (e) {
        status = $(this).attr('status')
        output = $(this).attr('data')
        $("#status").text(status)
        $("#output").text(output)
        $(".modal").modal('show')
    })

    </script>
{% endblock %}